<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '申请调课',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import ClassSelectButton from '../components/ClassSelectButton.vue'
import StudentClassCard from '@/components/StudentClassCard.vue'
import LessonCell from '@/components/LessonCell.vue'
import { useUserStore } from '@/stores'
import { ClassApi } from '@/apis'

const userStore = useUserStore()

const getDetail = async () => {
  return Promise.resolve(true)
}

const originalClass = ref(null)
const targetClass = ref(null)
const selectLessons = ref([])

const selectOriginalClass = () => {
  uni.navigateTo({
    url: `/pages/class/select?type=original`,
  })
}

const selectTargetClass = () => {
  if (!originalClass.value) {
    uni.showToast({
      title: '请先选择转出班级',
      icon: 'none',
    })
    return
  }
  const params = `subject=${originalClass.value.subject}&classYear=${originalClass.value.classYear}&term=${originalClass.value.term}&grade=${originalClass.value.grade}&classCategory=${originalClass.value.classCategory}&unitPrice=${originalClass.value.unitPrice}&originalClassId=${originalClass.value.id}`
  uni.navigateTo({
    url: `/pages/class/select?type=target&${params}`,
  })
}

const selectLesson = () => {
  if (!originalClass.value) {
    uni.showToast({
      title: '请先选择转出班级',
      icon: 'none',
    })
    return
  }

  uni.navigateTo({
    url: `/pages/class/LessonSelect?id=${originalClass.value.id}`,
  })
}

onShow(() => {
  const original = uni.getStorageSync('originalClass')
  const target = uni.getStorageSync('targetClass')
  const lessons = uni.getStorageSync('selectLessons')
  if (original) {
    originalClass.value = JSON.parse(original)[0]
    uni.removeStorageSync('originalClass')
  }
  if (target) {
    targetClass.value = JSON.parse(target)[0]
    uni.removeStorageSync('targetClass')
  }

  if (lessons) {
    selectLessons.value = JSON.parse(lessons)
    uni.removeStorageSync('selectLessons')
  }
})

const commitHandle = async () => {
  const req = {
    oldClassId: originalClass.value.id,
    newClassId: targetClass.value.id,
    studentId: userStore.currentStudent.id,
    onlyRemainLesson: false,
    changeLessonIndexList: selectLessons.value.map(item => item.lessonIndex),
    changeType: 'CHANGE_LESSON',
  }
  try {
    await ClassApi.changeClassOrLesson(req)
    uni.showToast({
      title: '操作成功',
      icon: 'none',
    })
    uni.navigateBack()
  } catch (e) {
    console.warn('操作失败: ', e)
  }
}

const removeLesson = (index) => {
  selectLessons.value.splice(index, 1)
}

const { loading, data } = useRequest(getDetail)
</script>

<template>
  <view v-if="loading" class="flex-row-center-center bg-white page">
    <wd-loading color="#33AD7C" />
  </view>
  <template v-else>
    <view class="content px py">
      <view class="mb-[24rpx] flex-row-between-center">
        <text class="section text-28rpx font-500 text-main">
          转出班级
        </text>
        <view v-if="originalClass">
          <wd-button type="text" size="small" :round="false" @click="selectOriginalClass">
            重新选择
          </wd-button>
        </view>
      </view>
      <StudentClassCard v-if="originalClass" :data="originalClass" />
      <view v-else class="mt-[24rpx]">
        <ClassSelectButton height="180rpx" text="选择转出班级" @click="selectOriginalClass" />
      </view>
      <view class="mt-[24rpx] flex-row-between-center">
        <text class="section text-28rpx font-500 text-main">
          转入班级
        </text>
        <view v-if="targetClass">
          <wd-button type="text" size="small" :round="false" @click="selectTargetClass">
            重新选择
          </wd-button>
        </view>
      </view>
      <view v-if="targetClass" class="mt-[24rpx]">
        <StudentClassCard :data="targetClass" />
      </view>
      <view v-else class="mt-[24rpx]">
        <ClassSelectButton height="180rpx" text="选择转入班级" @click="selectTargetClass" />
      </view>
      <view class="mt-[24rpx] flex-row-between-center">
        <text class="section text-28rpx font-500 text-main">
          转出课次
        </text>
        <view v-if="selectLessons.length">
          <wd-button type="text" size="small" :round="false" @click="selectLesson">
            重新选择
          </wd-button>
        </view>
      </view>
      <uni-swipe-action v-if="selectLessons.length">
        <uni-swipe-action-item v-for="(item, index) in selectLessons" :key="item.id" class="mt-[24rpx]">
          <template #right>
            <view class="flex-col-center-center pl-[30rpx]">
              <view class="h-[72rpx] w-[72rpx] flex-col-center-center border-rd-[50%] bg-[#FFD7D7]" @click="removeLesson(index)">
                <wd-icon name="delete" size="22px" color="#DD0A0A" />
              </view>
            </view>
          </template>
          <view class="mb-4">
            <LessonCell :data="item" />
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <view v-else class="mt-[24rpx]">
        <ClassSelectButton text="选择转出课次" @click="selectLesson" />
      </view>
    </view>

    <view class="footer">
      <view class="px-[30rpx] py-[12rpx]">
        <wd-button block type="success" :disabled="!(originalClass && targetClass && selectLessons.length)" :round="false" @click="commitHandle">
          提交申请
        </wd-button>
      </view>
    </view>
  </template>
</template>

<style lang="scss" scoped>
  .content {
    height: calc(100vh - 160rpx) !important;
    overflow: scroll;
  }

  .footer {
    position: fixed;
    left: 0px;
    bottom: 0px;

    height: 160rpx;
    width: 100%;
    background: white;
    box-shadow: 0px -4px 4px 0px #0000000D;

  }
</style>
